<template>
    <view>
        <!-- 外部车辆登记页面 -->
        <!-- <view class="header-close" :style="'padding-top:' + (statusBarHeight + 13) + 'px;'" @tap="close">关闭</view> -->
<!-- 		<view class="head-block" v-if="weixin == 2">
			<view class="nav-title" :style="'top:10px'"></view>
			<view class="icon" @tap="goMy" :style="'top:6px'">
				<van-icon name="arrow-left" color="#333" size="45rpx" />
			</view>
		</view> -->
		<view class="parking_img">
			<image src="../../static/assets/img/parking_01.png" style="width: 750rpx;" mode="widthFix"></image>
		</view>
        <!-- <view class="line"></view> -->
        <view>
            <view class="title-input">
                <!-- <view class="title">尊敬的车主：</view> -->
                <!-- <view class="title-sub">您好，请配合小区外部车辆登记，谢谢！</view> -->
                <view class="title-name">
                    <!-- <van-field v-model="{{username}}" label="昵称" placeholder="请输入昵称" /> -->
                    <view class="text">手机号</view>
                    <view>{{ phone }}</view>
                </view>
                <view class="title-car">
                    <span class="title-number">
                        <span class="title-text">车牌号登记</span>
                    </span>
                </view>
            </view>
            <view></view>
            <!-- 车牌号码输入框 -->
            <view :data-id="index" v-for="(item, idx) in plateNumbers" :key="item.i">
                <view class="carNumber">
                    <!-- 车牌号头两位 -->
                    <view class="carNumber-items">
                        <!-- <view class="carNumber-items-box" bindtap='openKeyboard'>
                <view class="carNumber-items-province carNumber-items-box-list">
                    {{carnum[0] || ''}}
                </view>
                <view class="carNumber-items-En carNumber-items-box-list">{{carnum[1] || ''}}</view>
            </view> -->
                        <!-- 常规 -->
                        <view :class="'carNumber-item ' + (plate === idx && plateIndex === 0 ? 'active' : '')" :data-idx="idx" :data-index="0" @tap="openKeyboard">
                            {{ plateNumbers[idx][0] || '' }}
                        </view>
                        <view :class="'carNumber-item ' + (plate === idx && plateIndex === 1 ? 'active' : '')" :data-idx="idx" :data-index="1" @tap="openKeyboard">
                            {{ plateNumbers[idx][1] || '' }}
                        </view>
                        <view :class="'carNumber-item ' + (plate === idx && plateIndex === 2 ? 'active' : '')" :data-idx="idx" :data-index="2" @tap="openKeyboard">
                            {{ plateNumbers[idx][2] || '' }}
                        </view>
                        <view :class="'carNumber-item ' + (plate === idx && plateIndex === 3 ? 'active' : '')" :data-idx="idx" :data-index="3" @tap="openKeyboard">
                            {{ plateNumbers[idx][3] || '' }}
                        </view>
                        <view :class="'carNumber-item ' + (plate === idx && plateIndex === 4 ? 'active' : '')" :data-idx="idx" :data-index="4" @tap="openKeyboard">
                            {{ plateNumbers[idx][4] || '' }}
                        </view>
                        <view :class="'carNumber-item ' + (plate === idx && plateIndex === 5 ? 'active' : '')" :data-idx="idx" :data-index="5" @tap="openKeyboard">
                            {{ plateNumbers[idx][5] || '' }}
                        </view>
                        <view :class="'carNumber-item ' + (plate === idx && plateIndex === 6 ? 'active' : '')" :data-idx="idx" :data-index="6" @tap="openKeyboard">
                            {{ plateNumbers[idx][6] || '' }}
                        </view>
                        <!-- 新能源 -->
                        <view :class="'carNumber-item ' + (plateNumbers[idx][7] ? '' : 'carNumber-item-newpower')">
                            <view v-if="!plateNumbers[idx][7]" :data-idx="idx" :data-index="7" @tap="showPowerBtn">
                                <view class="carNumber-newpower-add">+</view>
                                <view>新能源</view>
                            </view>
                            <view v-if="plateNumbers[idx][7]" :data-idx="idx" :data-index="7" @tap="openKeyboard">
                                {{ plateNumbers[idx][7] }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 虚拟键盘 -->
            <view class="keyboard" v-if="KeyboardState">
                <view class="keyboardClose">
                    <view class="keyboardClose_btn" @tap="closeKeyboard">关闭</view>
                </view>
                <!-- 省份简写键盘 -->
                <view class="keyboard-item" v-if="plateIndex === 0">
                    <view class="keyboard-line" v-for="(item, index) in provinces" :key="index">
                        <view class="keyboard-btn" :data-val="itemlist" :data-plate="plate" @tap="bindChoose" v-for="(itemlist, index1) in item" :key="index1">
                            {{ itemlist }}
                        </view>
                    </view>
                    <view class="keyboard-del" @tap="bindDelChoose">
                        <van-icon name="cross" style="margin-top: 10rpx" />
                        <!-- <text class="font_family icon-shanchu keyboard-del-font"></text> -->
                    </view>
                </view>
                <!-- 车牌号码选择键盘 -->
                <view class="keyboard-item iscarnumber" v-else>
                    <view class="keyboard-line" v-for="(item, index) in numbers" :key="index">
                        <view class="keyboard-btn" :data-val="itemlist" :data-plate="plate" @tap="bindChoose" v-for="(itemlist, index1) in item" :key="index1">
                            {{ itemlist }}
                        </view>
                    </view>
                    <view class="keyboard-del" @tap="bindDelChoose">
                        <van-icon name="cross" />
                    </view>
                </view>
            </view>
            <view class="weui-cells__title">提示：无牌车请联系岗亭工作人员</view>
            <!-- 提交车牌 -->
            <van-button type="info" class="carNumberBtn" @tap.native="submitNumber">提交登记</van-button>
        </view>
    </view>
</template>

<script>
import util from './../../utils/util.js';
import api from './../../utils/api.js';
const app = getApp();
export default {
    data() {
        return {
            busiCode: '',
            tradeNoTime: 10,
            tradeNoInterval: '',
            getPhonePar: {},

            //接口参数
            // 省份简写
            provinces: [
                ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
                ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
                ['桂', '琼', '渝', '川', '贵', '云', '藏'],
                ['陕', '甘', '青', '宁', '新']
            ],

            // 车牌输入
            numbers: [
                ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
                ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
                ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
                ['W', 'X', 'Y', 'Z', '港', '澳', '学']
            ],

            carnum: [],
            showNewPower: false,
            KeyboardState: false,
            username: '',
            plateNumbers: [['', '', '', '', '', '', '', '']],
            plate: 0,

            //第几个车牌
            plateIndex: -1,

            weixinCode: '',
            phone: '',
            statusBarHeight: app.globalData.statusBarHeight,
            tradeNo: '',
			weixin: uni.getStorageSync('weixin')
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData({
            phone: util.noPassByMobile(uni.getStorageSync('phoneNumber')),
            getPhonePar: uni.getStorageSync('getPhonePar')
        });
		this.getPlateNoByPhone()
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
		this.getPlateNoByPhone()
	},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    // onShareAppMessage: function() {}
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */ methods: {
		 // 获取最近一次登记车牌号
		 getPlateNoByPhone(){
			 var _this = this
			 let param = {
				 phone:this.phone
			 }
			 uni.showLoading({
			 	title: '加载中'
			 });
			util.request(api.getPlateNoByPhone, param, 'GET')
				.then((res) => {
					if (res.success) {
						var car = res.data
						var arr = [car.split('')]
						this.setData({
							plateNumbers:[car.split('')]
						})
					}
					uni.hideLoading();
				})
		 },
		 goMy(i) {
		 	uni.navigateBack({
		 		delta: 1
		 	});
		 },
        // 选中点击设置
        bindChoose(e) {
            var plate = this.plate;
            var index = this.plateIndex;
            var plateNumbers = this.plateNumbers;
            plateNumbers[plate][index] = e.target.dataset.val;
            this.setData({
                plateNumbers
            });

            if (index < 7) {
                index = index + 1;
                this.setData({
                    plateIndex: index
                });
            } else {
                this.setData({
                    KeyboardState: false,
                    plate: 0,
                    //第几个车牌
                    plateIndex: -1
                });
            }
        },

        bindDelChoose() {
            var plate = this.plate;
            var index = this.plateIndex;

            if (index > 0) {
                index = index - 1;
                this.setData({
                    plateIndex: index
                });
            }
            var plateNumbers = this.plateNumbers;
            plateNumbers[plate][index] = '';
            this.setData({
                plateNumbers
            });
        },

        showPowerBtn() {
            this.setData({
                showNewPower: true,
                KeyboardState: true
            });
        },

        closeKeyboard() {
            this.setData({
                KeyboardState: false
            });
        },

        openKeyboard(e) {
            this.setData({
                KeyboardState: true,
                plate: e.currentTarget.dataset.idx,
                plateIndex: e.currentTarget.dataset.index
            });
        },

        // 保存  // 提交车牌号码
        submitNumber() {
            const that = this;
            const plateNumberslength = that.plateNumbers.map((e) => e.join(''));
            for (let i = 0; i < plateNumberslength.length; i++) {
                if (plateNumberslength[i].length < 7) {
                    uni.showToast({
                        title: '请输入完整车牌',
                        icon: 'none'
                    });
                    return;
                }
            }

            that.setData({
                KeyboardState: false
            });
            that.externalCarCheck(); 
			// wx.navigateTo({
            //   url: '/pages/successTip/index',
            // })
        },

        /***缓存参数 */
        setStorages(res) {
            uni.setStorage({
                key: 'name',
                data: res.data.busiInfo.name
            }); //姓名

            uni.setStorage({
                key: 'phoneNumber',
                data: res.data.busiInfo.phoneNumber
            }); //手机号

            uni.setStorage({
                key: 'faceImageUrl',
                data: res.data.busiInfo.faceImageUrl
            }); //头像

            uni.setStorage({
                key: 'identityId',
                data: res.data.busiInfo.identityId
            }); //用户id

            uni.setStorage({
                key: 'unionId',
                data: res.data.busiInfo.unionId
            }); //用户id

            if (res.data.busiInfo.plateNos != null && res.data.busiInfo.plateNos.length > 0) {
                uni.setStorage({
                    key: 'status',
                    data: true
                }); //状态

                uni.setStorage({
                    key: 'plateNos',
                    data: res.data.busiInfo.plateNos.map((e) => e).toString()
                }); //用户车牌号
            } else {
                uni.setStorage({
                    key: 'status',
                    data: true
                }); //状态

                uni.setStorage({
                    key: 'plateNos',
                    data: ''
                }); //用户车牌号
            }
        },

        externalCarCheck() {
            var that = this;		
            that.getPhonePar.plateNo = that.plateNumbers[0].join('');
			uni.showLoading({
			    title: '信息提交中...',
			    mask: true
			});				
			    util.request(api.qrCodePushAndReg,that.getPhonePar,'post').then((res) => {
						uni.hideLoading();
			            if (res.success) {
							 // clearInterval(that.tradeNoInterval);
							uni.navigateTo({
							    url: '/pages/successTip/index'
							});
							
			            } else {
			                uni.showToast({
			                    title: res.msg,
			                    icon: 'none'
			                });
			            }
			        })
			        .catch((err) => {
			            uni.showToast({
			                title: err + 11,
			                icon: 'none'
			            });
			        });
			// }, 1000);

     //        util.request(api.qrCodePushAndReg, that.getPhonePar, 'POST')
     //            .then((res) => {
					// alert(res.data)
     //                uni.hideLoading();
     //                if (res.data) {
     //                    uni.setStorage({
     //                        key: 'AUTHORIZATION',
     //                        data: res.data.busiInfo.token
     //                    }); //token

     //                    that.setStorages(res); //开始存储所需要的信息

     //                    that.setData({
     //                        tradeNo: res.busiCode
     //                    });
     //                    uni.showLoading({
     //                        title: '信息提交中...',
     //                        mask: true
     //                    });
     //                    that.tradeNoInterval = setInterval(() => {
     //                        var _tradeNoTime = that.tradeNoTime - 1;

     //                        if (_tradeNoTime <= 0) {
     //                            uni.hideLoading();
     //                            clearInterval(that.tradeNoInterval);
     //                            uni.showToast({
     //                                title: '抱歉，系统异常，请稍后再试',
     //                                icon: 'none'
     //                            });
     //                            return;
     //                        }

     //                        that.setData({
     //                            tradeNoTime: _tradeNoTime
     //                        });
     //                        util.request(api.getOpenResult + '?tradeNo=' + this.tradeNo, 'get')
     //                            .then((res) => {
     //                                if (res.success) {
     //                                    if (res.data.openResult == 1 || res.data.openResult == 2) {
     //                                        clearInterval(that.tradeNoInterval);
     //                                        uni.navigateTo({
     //                                            url: '/pages/successTip/index'
     //                                        });
     //                                        return;
     //                                    }
     //                                } else {
     //                                    uni.showToast({
     //                                        title: res.msg,
     //                                        icon: 'none'
     //                                    });
     //                                }
     //                            })
     //                            .catch((err) => {
     //                                console.log(err);
     //                            });
     //                    }, 1000);
     //                } else {
     //                    uni.showToast({
     //                        title: res.msg,
     //                        icon: 'none'
     //                    });
     //                }
     //            })
     //            .catch((err) => {
     //                console.log(err);
     //            });
        },

        //左上角关闭
        close() {
            uni.reLaunch({
                url: '/pages/index/index'
            });
        }
    }
};
</script>
<style>
@import './externalCarCheck.css';
</style>
